<template>
  <div id="echarts1" style="width:100%;height:430px"></div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { sumList } from '@/api/dashboard'

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
])
export default {
  mounted () {
    // this.week()
    // const chartDom = document.getElementById('echarts1')
    // const myChart = echarts.init(chartDom)
    // this.option && myChart.setOption(this.option)
    // console.log(this.option)
  },
  created () {
    // this.week()
  },
  data () {
    return {
      option: {
        color: ['#ff7100', '#ffb200'],
        dataset: {
          source: [
            // [], [], []
            ['type', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            ['入库', 320, 332, 301, 334, 390],
            ['出库', 220, 182, 191, 234, 290]
          ]
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              shadowBlur: 2,
              shadowColor: 'gray'
            }
          }
        },
        legend: {
          bottom: '0%'
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          }
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            seriesLayoutBy: 'row',
            barGap: '0'
          },
          {
            type: 'bar',
            seriesLayoutBy: 'row',
            barGap: '0'
          }
        ]
      }
    }
  },
  methods: {
    async week (type) {
      const { data } = await sumList({ dimension: type })
      // console.log(data)
      this.option.dataset.source.splice(0, 1, ['type', ...data.x])
      this.option.dataset.source.splice(1, 1, [data.data[0].name, ...data.data[0].data])
      this.option.dataset.source.splice(2, 1, [data.data[1].name, ...data.data[1].data])
      // console.log(this.option.dataset.source)
      const chartDom = document.getElementById('echarts1')
      const myChart = echarts.init(chartDom)
      this.option && myChart.setOption(this.option)
      // this.option.dataset.source.splice(2, 0, [data.data[1].name, ...data.data[1]])
    },
    month () {},
    year () {}
  }

}
</script>

<style>

</style>
